<template>
    <ul class="user_overview flex" v-if="pageflag">
        <li class="user_overview-item" style="color: #0d8fd2">
            <div class="user_overview_nums allnum ">
                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
            </div>
            <p>男生</p>
        </li>

        <li class="user_overview-item" style="color: #d20d2c">
            <div class="user_overview_nums laramnum">
                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>女生</p>
        </li>
    </ul>
    <Reacquire v-else @onclick="getData" line-height="200px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
let style = {
    fontSize: 24
}
export default {
    data() {
        return {
            options: {},
            regionCode:'china',
            userOverview: {
                alarmNum: 0,
                offlineNum: 0,
                onlineNum: 0,
                totalNum: 0,
            },
            pageflag: true,
            timer: null,
            config: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#0d8fd2",
                },
            },
            laramnumconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#f5023d",
                    fill: "#D20D2C",
                },
            }

        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        this.getData('china')
    },
    mounted() {
    },
    beforeDestroy() {
        this.clearData()

    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        getData(regionCode) {
          this.regionCode=regionCode;
          this.pageflag = true;
          if (regionCode == "china" || regionCode == "100000"){
            this.$axios.get("/api/result/sex").then((res) => {
              if (!this.timer) {
                console.log("新生性别分布", res);
              }

              if (res.code == 0) {
                //  this.userOverview = res.data;
                // 在线数
                this.config = {
                  ...this.config,
                  number: [res.data['0']||0]
                }

                this.laramnumconfig = {
                  ...this.laramnumconfig,
                  number: [res.data['1']||0]
                }
                this.switper()
              } else {
                this.pageflag = false;
                this.$Message.warning(res.message);
              }
            });
          }
          else{
            this.$axios.get(`/api/result/sex/${regionCode}`).then((res) => {
              if (!this.timer) {
                console.log("新生性别分布", res);
              }

              if (res.code == 0) {
                //  this.userOverview = res.data;
                // 在线数
                this.config = {
                  ...this.config,
                  number: [res.data['0']]
                }

                this.laramnumconfig = {
                  ...this.laramnumconfig,
                  number: [res.data['1']]
                }
                this.switper()
              } else {
                this.pageflag = false;
                this.$Message.warning(res.message);
              }
            });
          }

        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData(this.regionCode)
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
    },
};
</script>
<style lang='scss' scoped>
.user_overview {
	margin: 0 40px;


    li {
        flex: 1;

        p {
            text-align: center;
            height: 20px;
            font-size: 20px;
        }

        .user_overview_nums {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 20px auto 16px;
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bachground_animation::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {
            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../../assets/img/left_top_blue.png");
				transform: translateX(-3px);
            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_green.png");
				transform: translateX(-3px);
            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_yellow.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_red.png");

            }
        }
    }
}
</style>